<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>
    
    <div class="box"></div>
    <div class="box"></div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var box = document.getElementsByClassName("box");
        console.log("box", box);
        var Box = document.querySelector(".box");
        var nav = document.querySelector("#nav");
        var Li = document.querySelectorAll("li");
        console.log("Box", Box);
        console.log("nav", nav);
        console.log("Li", Li);
        console.log(nav.children);

        var allBox = document.querySelectorAll(".box");
        console.log(allBox);
        var lis = document.querySelectorAll("li")
        console.log(lis);
        console
    </script>
</body>
</html>